import React, { CSSProperties, JSX, MouseEvent } from 'react'
import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
import ThreeDemo from './pages/three/ThreeDemo'
import BabylonDemo from './pages/babylon/BabylonDemo'

interface NavigationStyles {
  navStyle: CSSProperties
  linkStyle: CSSProperties
  activeLinkStyle: CSSProperties
  titleStyle: CSSProperties
}

function Navigation(): JSX.Element {
  const location = useLocation()
  
  const styles: NavigationStyles = {
    navStyle: {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      height: '60px',
      background: 'rgba(0, 0, 0, 0.8)',
      backdropFilter: 'blur(10px)',
      display: 'flex',
      alignItems: 'center',
      padding: '0 20px',
      zIndex: 1000,
      borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
    },
    linkStyle: {
      color: 'white',
      textDecoration: 'none',
      padding: '8px 16px',
      margin: '0 8px',
      borderRadius: '6px',
      transition: 'all 0.3s ease',
      fontSize: '14px',
      fontWeight: '500'
    },
    activeLinkStyle: {
      color: '#4CAF50',
      textDecoration: 'none',
      padding: '8px 16px',
      margin: '0 8px',
      borderRadius: '6px',
      transition: 'all 0.3s ease',
      fontSize: '14px',
      fontWeight: '500',
      background: 'rgba(255, 255, 255, 0.2)'
    },
    titleStyle: {
      color: 'white',
      fontSize: '18px',
      fontWeight: 'bold',
      marginRight: '30px'
    }
  }

  return (
    <nav style={styles.navStyle}>
      <div style={styles.titleStyle}>3D 模型展示</div>
      <Link 
        to="/three" 
        style={location.pathname === '/three' ? styles.activeLinkStyle : styles.linkStyle}
      >
        🎮 Three.js Demo
      </Link>
      <Link 
        to="/babylon" 
        style={location.pathname === '/babylon' ? styles.activeLinkStyle : styles.linkStyle}
      >
        🚀 Babylon.js Demo
      </Link>
    </nav>
  )
}

function Home(): JSX.Element {
  const handleMouseOver = (e: MouseEvent<HTMLAnchorElement>): void => {
    const target = e.target as HTMLAnchorElement
    target.style.background = 'rgba(255, 255, 255, 0.3)'
    target.style.transform = 'translateY(-2px)'
  }

  const handleMouseOut = (e: MouseEvent<HTMLAnchorElement>): void => {
    const target = e.target as HTMLAnchorElement
    target.style.background = 'rgba(255, 255, 255, 0.2)'
    target.style.transform = 'translateY(0)'
  }

  const containerStyle: CSSProperties = {
    width: '100vw',
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    color: 'white',
    textAlign: 'center'
  }

  const buttonStyle: CSSProperties = {
    padding: '12px 24px',
    background: 'rgba(255, 255, 255, 0.2)',
    color: 'white',
    textDecoration: 'none',
    borderRadius: '8px',
    border: '1px solid rgba(255, 255, 255, 0.3)',
    transition: 'all 0.3s ease',
    fontSize: '16px'
  }

  return (
    <div style={containerStyle}>
      <h1 style={{ fontSize: '3rem', marginBottom: '2rem', fontWeight: '300' }}>
        3D 模型交互演示
      </h1>
      <p style={{ fontSize: '1.2rem', marginBottom: '3rem', opacity: 0.9 }}>
        体验 Three.js 和 Babylon.js 的 3D 模型展示与变形功能
      </p>
      <div style={{ display: 'flex', gap: '20px' }}>
        <Link 
          to="/three"
          style={buttonStyle}
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          🎮 Three.js 演示
        </Link>
        <Link 
          to="/babylon"
          style={buttonStyle}
          onMouseOver={handleMouseOver}
          onMouseOut={handleMouseOut}
        >
          🚀 Babylon.js 演示
        </Link>
      </div>
    </div>
  )
}

export default function App(): JSX.Element {
  return (
    <Router>
      <Navigation />
      <div style={{ paddingTop: '60px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/three" element={<ThreeDemo />} />
          <Route path="/babylon" element={<BabylonDemo />} />
        </Routes>
      </div>
    </Router>
  )
}